<template>
  <div>
    <div ref="pie" class="pie" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {

    }
  },

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.pie)
    var options = {
      title: {
        text: '购买终端',
        textStyle: {
          color: '#ccc',
          fontSize: 22,
          fontWeight: 'normal'
        }
      },
      tooltip: {
        formatter: '{b}数量: {c}个;占比({d}%)',
        backgroundColor: 'rgb(0,0,0)',
        borderColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          data: [

            { value: 25, name: 'Android',
              label: {
                color: '#6d48dc'
              },
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#6d48dc' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#4c4cdc' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            { value: 20, name: 'ios',
              label: {
                color: '#24cbff'
              },
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#24cbff' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#2493ff' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            { value: 15, name: 'PC Web',
              label: {
                color: '#7d05e2'
              },
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#7d05e2' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#bb03e5' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            { value: 5, name: 'Wap Web',
              label: {
                color: '#bb03e5'
              },
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#7d05e2' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#bb03e5' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            }
          ]
        }
      ]
    }
    // 绘制图表
    myChart.setOption(options)
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.pie{
  width: 100%;
  height: 100%;
}
</style>
